<template>
	<view class="set-pass">
		<view class="form-box">
			<u--form labelPosition="left" labelWidth="20rpx" :model="form" :rules="rules" ref="uForm">
				<u-form-item prop="tradepass">
					<u-input v-model="form.tradepass" type="number" maxlength="6" border="none" :password="!showPassword" placeholder="请输入支付密码">
						<template #suffix>
							<view @click="showPassword = !showPassword">
								<u-icon :name="showPassword ? 'eye-off' : 'eye-fill'" color="#666" size="36rpx"></u-icon>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="tquepass">
					<u--input v-model="form.tquepass" type="number" maxlength="6" border="none" :password="!showQuePassword" placeholder="请再次输入支付密码"></u--input>
					<view slot="right" @click="showQuePassword = !showQuePassword">
						<u-icon :name="showQuePassword ? 'eye-off' : 'eye-fill'" color="#666" size="36rpx"></u-icon>
					</view>
				</u-form-item>
			</u--form>
			
			<button class="btn" @click="passSubmit">确认</button>
		</view>
	</view>
</template>

<script>
	import { changeTradePwd } from '@/api/api'

	export default {
		data () {
			return {
				form: {
					tradepass: '',
					tquepass: '',
					type: 2
				},
				rules: {
					tradepass: { required: true, message: '请输入支付密码', trigger: 'blur' },
					tquepass: { required: true, message: '请再次输入支付密码', trigger: 'blur' },
				},
				showNewPassword: false,
				showQuePassword: false,
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			passSubmit () {
				this.$refs.uForm.validate().then(valid => {
					if (valid) {
						uni.showLoading({ mask: true })
						
						changeTradePwd(this.form).then(res => {
							if (res) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
						
								setTimeout(() => {
									uni.navigateBack()
								}, 200)
							}
						})
					}
				}).catch(errors => {
					
				})
			}
		}
	}
</script>

<style lang="scss">
.set-pass {
	box-sizing: border-box;
	padding: 32rpx;
	min-height: 100%;
	background-color: $bg-color;
	.form-box {
		padding: 52rpx 42rpx;
		border-radius: 20rpx;
		background-color: #fff;
		::v-deep {
			.u-form-item {
				&:not(:last-child) {
					margin-bottom: 24rpx;
				}
				.u-form-item__body {
					padding: 20rpx;
					border-radius: 72rpx;
					background-color: #f7f7f7;
				}
				.u-form-item__body__right__message {
					margin-top: 8rpx;
				}
			}
		}
		.btn {
			margin-top: 28rpx;
			border-radius: 88rpx;
			height: 88rpx;
			color: #fff;
			font-size: 32rpx;
			line-height: 88rpx;
			background-color: $primary-color;
			box-shadow: 0 0 24rpx rgba($color: $primary-color, $alpha: 0.2);
			&[disabled] {
				background-color: rgba($color: $primary-color, $alpha: 0.4);
				box-shadow: none;
			}
		}
	}
}
</style>
